<template>
  <transition name="clueBounce">
    <div class="clues" v-if="clueShow && clueIsShow" :style="cluesStyle" @touchstart.stop="touchstart($event)"
      @touchmove.stop="touchmove($event)" @touchend.stop="touchend($event)"></div>
  </transition>
</template>

<script>
import { mapGetters, mapActions } from "vuex"
export default {
  props: ["clueIndex", "imageries"],
  data() {
    return {
      y: 0,
      x: 0,
      moveX: 0,
      moveY: 0,
      transition: "all .5s",
      clueIsShow: true
    }
  },
  computed: {
    cluesStyle() {
      return {
        background: "url(" + this.clueIndex.imageUrl + ")0 0/100% 100%",
        width: this.clueIndex.width,
        height: this.clueIndex.height,
        top: this.clueIndex.y,
        left: this.clueIndex.x,
        transition: this.transition,
        marginLeft: this.moveX + 'px',
        marginTop: this.moveY + 'px'
      }
    },
    clueShow() {
      return this.cluesPress.indexOf(this.clueIndex) > -1
    },
    indexImagery() {
      return this.imageries.filter(item => { return item.eryId === this.clueIndex.imageryId })[0]
    },
    ...mapGetters("blueFoxStatus", {
      clues: "getClues",
      cluesPress: "getCluesPress",
      allCluesPress: "getAllCluesPress",
      collectBlueFox: "getCollectBlueFox"
    })
  },
  methods: {
    //滑动事件
    touchstart: function (event) {
      this.y = event.changedTouches[0].clientY
      this.x = event.changedTouches[0].clientX
    },
    touchmove: function (event) {
      this.transition = "all 0s"
      this.moveX = event.changedTouches[0].clientX - this.x
      this.moveY = event.changedTouches[0].clientY - this.y
    },
    touchend: function (event) {
      let minX = parseFloat(this.indexImagery.left) / 100,
        minY = parseFloat(this.indexImagery.top) / 100,
        maxX = minX + parseFloat(this.indexImagery.width) / 100,
        maxY = minY + parseFloat(this.indexImagery.height) / 100,
        clientX = (event.changedTouches[0].clientX + (this.mainWidth - this.windowWidth) / 2) / this.mainWidth,
        clientY = (event.changedTouches[0].clientY + (this.mainHeight - this.windowHeight) / 2) / this.mainHeight
      if (clientX >= minX && clientX <= maxX && clientY >= minY && clientY <= maxY) {
        this.clueIsShow = false
        this.setClueImageryIndex(this.indexImagery.eryId)
        this.setAllCluesPress(this.clueIndex)
        this.sucMusic()
      }
      else {
        this.moveX = 0
        this.moveY = 0
        this.transition = "all 0.5s"
        this.losMusic()
      }
    },
    ...mapActions("blueFoxStatus", ["setClueImageryIndex", "setAllCluesPress", "setBlueFoxLockShow"])
  },
  watch: {
    allCluesPress: function (list) {
      if (list.length === Object.keys(this.clues).length && !this.collectBlueFox) {
        setTimeout(() => {
          this.univerMusic()
          // this.setBlueFoxLockShow(true)
        }, 1000)
      }
    }
  }
};
</script>

<style scoped lang='stylus'>
.clues
  position absolute
  z-index 99
</style>
